<template>
  <div class="my-container">
    <shop-bar></shop-bar>
    <product-bar></product-bar>
    <el-container class="main-container">
      <el-main class="main-product">
        <el-row type="flex" align='middle' :span="24">
          <el-col :span="20"><h2 class="product-title">{{ productDetail.productTilte }}</h2></el-col>
          <el-col :span="4"><i class="el-icon-time"></i>11</el-col>
        </el-row>
        <el-divider></el-divider>

        <el-container class="container_center">
          <el-main class="carousel_main" >
            <el-carousel style="width: 100%; height: 100%;" trigger="click" height="100%">
              <el-carousel-item v-for="item in 4" :key="item">
                <img style="width: 100%; height: 100%; object-fit: contain;"
                     src="https://th.bing.com/th/id/OIP.r8MNZ800MJIoMr1aA5l98QHaEK?pid=ImgDet&rs=1" alt="Card image">
              </el-carousel-item>
            </el-carousel>
          </el-main>
          <el-main class="buy_main">
            <el-card class="main-tags-tag">
              <h2>100 C币</h2>
              <el-row :span="24">
                <el-col :span="4"><i class="el-icon-user-solid"></i>11</el-col>
                <el-col :span="4"><i class="el-icon-star-on"></i>11</el-col>
                <el-col :span="4"><i class="el-icon el-icon-view"></i>11</el-col>
              </el-row>
              <el-row style="margin-top: 1em" :gutter="10" >
                <el-col :span="12">
                  <el-button type="danger"> 立即下载</el-button>
                </el-col>
                <el-col :span="12">
                  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
                </el-col>

              </el-row>
            </el-card>
          </el-main>
        </el-container>
        <!--     详情   -->

        <el-descriptions :column="2">
          <el-descriptions-item label="源码大小">kooriookami</el-descriptions-item>
          <el-descriptions-item label="分支">18100000000</el-descriptions-item>
          <el-descriptions-item label="费用">苏州市</el-descriptions-item>
          <el-descriptions-item label="语言">18100000000</el-descriptions-item>
          <el-descriptions-item label="上传时间">苏州市</el-descriptions-item>
          <el-descriptions-item label="作者">苏州市</el-descriptions-item>
          <el-descriptions-item label="标签">
            <el-tag size="small">学校</el-tag>
          </el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <shop-tab></shop-tab>

      </el-main>
      <el-main class="main-tags">
        <el-card class="main-user-card">
          <el-row :span="24">
            <el-col :span="10">
              <el-avatar src="https://th.bing.com/th/id/OIG.Nxy8n3bgFil6zVNN1v48?pid=ImgGn" :size="100"></el-avatar>
            </el-col>
            <el-col :span="10">
              <h2>小布</h2>
              <span style="font-size: 11px">粉丝：11</span>
            </el-col>
          </el-row>
          <el-row :span="24" style="margin-top: 1em">
            <el-col :span="10"> 人虽欲自绝 其何伤于日月乎</el-col>
            <el-col :span="14">
              <el-row :span="24">
                <el-button style="width: 100%" type="primary">关注</el-button>
              </el-row>
              <el-row :span="24" style="margin-top: 0.5em">
                <el-button style="width: 100%" plain>私信</el-button>
              </el-row>

            </el-col>
          </el-row>


        </el-card>
        <el-collapse accordion>
          <el-collapse-item>
            <template slot="title">
              常见问题<i class="header-icon el-icon-info"></i>
            </template>
            <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
            <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
          </el-collapse-item>
          <el-collapse-item title="源码说明">
            <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
            <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
          </el-collapse-item>
          <el-collapse-item title="操作手册">
            <div>简化流程：设计简洁直观的操作流程；</div>
            <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
            <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
          </el-collapse-item>
          <el-collapse-item title="反馈">
            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
          </el-collapse-item>
        </el-collapse>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import productApi from "@/api/user/product_api.js";
import {formatDate} from "@/util/util";

export default {
  data() {
    return {
      productDetail: {}

    };
  },


  created() {
    this.init();
  },


  methods: {
    init() {
      let id = this.$route.params.id;
      this.getProductDetail(id);
      console.log(this.productDetail)
    },
    getProductDetail(id) {
      productApi.getProductDetail(id).then(res => {
        this.productDetail = res.data.data
      }).catch(error => {
        console.log(error)
      })
    }
  }
};
</script>

<style scoped>
.product-title {
  text-align: left;
}






.container_center {
  height: 15em;
  width: 100%;
}

.container_center .carousel_main {
  width: 30%;
  height: 100%;
}

.container_center .buy_main {
  width: 40%;
  height: 100%;
}

.container_center .buy_main .main-tags-tag {
  height: 95%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.main-product {
  width: 60%;
}

.main-tags {
  width: 25%;
  margin-top: 90px;
}

.main-user-card {
  border-radius: 15px;
  height: 15em;
}

.card-image img {
  max-width: 100%;
  max-height: 100%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

</style>
